<template>
	<view class="u-page">
		<view class="followCount">我的关注({{followCount}})</view>
		<view class="follow-item" v-for="(item,index) in followList" :key="index">
			<image :src="'http://127.0.0.1:8080' + item.avatar"></image>
			<view class="user-info">
				<span class="username">{{item.nickName }}</span>
				<view class="followText" @click="toggleFollow(item.userId,item.isFollowing)">
					<span>{{item.isFollowing==1?followText:unfollowText}}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		listFollow
	} from '@/api/follow.js'
	import {
		getUser
	} from '@/utils/auth'
	import {
		addFollow,
		delFollow,
		addOrCancel
	} from '@/api/follow.js'
	const followList = ref([])
	const followCount = ref()
	//取出当前登陆人的userid，如果被关注用户的id等于当前登陆人的id，则不显示关注字眼
	const userid = getUser()
	const unfollowText = ref('+关注')
	const followText = ref('已关注')
	const actionListFollow = (() => {
		listFollow({
			myUserId: userid
		}).then((res) => {
			console.log(res.rows.length, '关注用户res是个啥')
			followCount.value = res.rows.length
			followList.value = res.rows

		})
	})
	onMounted(() => {
		//在此调后端接口
		actionListFollow()
	})
	//关注/未关注点击事件
	const toggleFollow = ((userId, isFollowing) => {
		console.log(userId, 'userId')
		console.log(isFollowing, 'isFollowing')
		if (isFollowing == 1) {
			console.log(456)
			addOrCancel({
				userId: userId,
				myUserId: userid
			}).then((res) => {
				actionListFollow()
				uni.showToast({
					title: '取消关注成功',
					icon: 'none'
				})
			})
		} else {
			console.log(123)
		}

	})
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.u-page {
		list-style: none;
		.followCount{
			padding: 20rpx 0rpx;
			font-size: 35rpx;
		}
		.follow-item {
			display: flex;
			align-items: center;
			padding: 32rpx;
			background-color: #F0E8E5;
			margin-bottom: 5rpx;
			border-bottom: 2rpx solid #eaeaea;

			image {
				width: 48px;
				height: 48px;
				border-radius: 50%;
				margin-right: 16px;
			}

			.user-info {
				display: flex;

				// position: relative;
				.username {
					// flex:8;
					font-size: 16px;
					margin-bottom: 4px;
				}

				.followText {
					// margin: 35rpx;
					position: absolute;
					right: 10rpx;
					background: transparent;
					cursor: pointer;
					color: #3f51b5;
					font-size: 20rpx;
					outline: none;
					transition: color 0.3s ease;

					span {
						padding: 20rpx;
						/* 根据需要调整内边距，以便边框不会紧贴文字 */
						border: 2px solid #FFA500;
						/* 设置边框宽度、样式和颜色 */
						border-radius: 15rpx;
						/* 如果需要，可以添加边框圆角 */
						font-size: 35rpx;
						/* 调整字体大小 */
					}
				}
			}
		}
	}
</style>